function $(id) {
  return document.getElementById(id);
}

window.onload = function () {
  fullBookTable(bookArray);
  fullShopTable(shoppArray);
}
//填充书籍信息表格
function fullBookTable(bookArray) {

  let str = "";
  bookArray.forEach(n => {
    str += `<tr onclick="choice(${n.code})">
            <td><a href="#">图片</a></td>
            <td>${n.bookname}</td>
            <td>${n.auto}</td>
            <td>${n.price}</td>
        </tr>`
  });
  $("bookData").innerHTML = str;

}

//填充购物车信息表格
function fullShopTable(shoppArray) {
  let str = "";
  shoppArray.forEach(n => {
    str += `<tr>
            <td>${n.name}</td>
            <td>${n.price}</td>
            <td><input type="number" value="${n.num}" min="1"></td>
            <td></td>
            <td><input type="button" value="移除商品" style="color: #e5b356"
            onclick="del()"></td>
        </tr>`;
  });
  $("shopData").innerHTML = str;
}

//选择书籍
function choice(code) {
  //显示书籍信息到右边

  //选中的书籍对象
  let bookObj = bookArray.find(n => n.code == code);

  let spanArray = $("spanDiv").getElementsByTagName("span");
  spanArray[0].innerHTML = bookObj.bookname;
  spanArray[1].innerHTML = bookObj.auto;
  spanArray[2].innerHTML = bookObj.price;

  return bookObj;
}

//根据书名模糊查询书籍信息
function findByName() {

  let nameArray = bookArray.filter(n => n.bookname.indexOf($("name").value) != -1);
  fullBookTable(nameArray);
}

//点击加入购物车，展示购物车div
//并且做判断。如果购物车里面原本存在该物品则数量加一。
//如果没有则添加该书籍对象
function showShopDiv() {
  $("showDiv").style.visibility = "visible";
  $("showDiv").style.width = document.documentElement.clientWidth + "px";
  $("showDiv").style.height = document.documentElement.clientHeight + "px";

//判断购物车中是否有已经存在该商品
  let index =shopArray.findIndex(n => n.name==bookObj.name)
  if ((index)!=-1){//已存在
    // 商品数量+1
    shopArray[index].number+=1;
    //更新购物车
    updateShopCar();
  }
  else {//不存在
    //封装为商品对象
    let shopObj = {name: bookObj.name, price: bookObj.price, number: 1};
    //将商品对象添加进商品数组
    shopArray.push(shopObj);
    //更新购物车
    updateShopCar();
  }

}
/*
更新购物车
 */
function updateShopCar() {
  let str = "";
  shopArray.forEach(n =>{
    str+=`<tr><td>`+n.name+`</td><td>`+n.price+`</td><td><input type="number" onblur="updateNum(this)" value=`+n.number+
      `></td><td>`+n.price*n.number+`</td><td><input type="button" value="移除商品" onclick="del(this)"></td></tr>`
  });

  $("shopCar-tbody").innerHTML = str;

  //获取商品总价
  let allPrice = 0;
  shopArray.forEach(n =>{
    allPrice+=(n.price*n.number);
  });
  $("allprice").innerHTML = allPrice;

}
/**
 * 更改数量
 * @param tdObj  当前数量
 */
function updateNum(tdObj) {
  //得到当前修改数量的商品对象
  let shopName = tdObj.parentNode.previousElementSibling.previousElementSibling.innerHTML;
  let shopObj = shopArray.find(n => n.name==shopName);

  //判断数量是否小于1
  if (tdObj.value<1){//小于1
    //将数量修改为原来的值
    tdObj.value=shopObj.number;
  }
  else {//不小于1
    //修改商品数量
    shopObj.number=tdObj.value;
    //更新表格
    updateShopCar();
  }
}


//点击移除按钮。总价随之改变
function del() {
//得到当前需要移除的商品对象
  let shopName = tdObj.parentNode.previousElementSibling.previousElementSibling.previousElementSibling.previousElementSibling.innerHTML;
  //得到下标
  let index = shopArray.findIndex(n => n.name==shopName);
  //从商品数组中删除该商品
  shopArray.splice(index,1);
  //更新购物车
  updateShopCar();
}


//点击继续购买。隐藏购物车
function bookShop() {
  $("showDiv").style.visibility = "hidden";
}

